<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/home/mine"></ion-back-button>
    </ion-buttons>
    <ion-title>修改密码</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content non-padding>
  <div class="ion-padding-horizontal">
    <form
      (ngSubmit)="onChangePassword(passwordForm)"
      #passwordForm="ngForm"
      novalidate
    >
      <ion-list>
        <ion-item>
          <ion-label position="floating">输入旧密码</ion-label>
          <ion-input
            required
            type="password"
            [(ngModel)]="oldPassword"
            name="oldpass"
            #oldpass="ngModel"
            pattern="[0-9a-zA-Z]{6,12}"
          ></ion-input>
        </ion-item>
        <ion-text
          [hidden]="!oldpass.errors?.required"
          padding-strt
          color="danger"
          *ngIf="oldpass.invalid && oldpass.touched"
          class="tips"
        >
          请输入旧密码
        </ion-text>
        <ion-text
          [hidden]="!oldpass.errors.pattern"
          padding-start
          color="danger"
          *ngIf="oldpass.invalid && oldpass.touched"
          class="tips"
        >
          长度6至16位，至少包含数字、英文、符号其中两种字符
        </ion-text>
        <ion-item>
          <ion-label position="floating">请输入新密码</ion-label>
          <ion-input
            type="password"
            required
            [(ngModel)]="newPassword"
            name="newpass"
            #newpass="ngModel"
            pattern="[0-9a-zA-Z]{6,12}"
          ></ion-input>
        </ion-item>
        <ion-text
          [hidden]="!newpass.errors?.required"
          padding-strt
          color="danger"
          *ngIf="newpass.invalid && newpass.touched"
          class="tips"
        >
          请输入新密码
        </ion-text>
        <ion-text
          [hidden]="!newpass.errors?.pattern"
          padding-start
          color="danger"
          *ngIf="newpass.invalid && newpass.touched"
          class="tips"
        >
          长度6至16位，至少包含数字、英文、符号其中两种字符
        </ion-text>
        <ion-item>
          <ion-label position="floating">请确认新密码</ion-label>
          <ion-input
            type="password"
            required
            [(ngModel)]="checkPassword"
            name="checkpass"
            #checkpass="ngModel"
          ></ion-input>
        </ion-item>
        <ion-text
          [hidden]="!checkpass.errors?.required"
          padding-strt
          color="danger"
          *ngIf="checkpass.invalid && checkpass.touched"
          class="tips"
        >
          请再输入一次
        </ion-text>
        <ion-text
          [hidden]="newPassword == checkPassword"
          padding-start
          color="danger"
          *ngIf="checkpass.touched"
          class="tips"
          >两次密码不一致</ion-text
        >
      </ion-list>
      <ion-button
        type="submit"
        expand="block"
        [disabled]="passwordForm.invalid || newPassword !== checkPassword"
      >
        确定
      </ion-button>
    </form>
  </div>
</ion-content>
